<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../../yl/index.css" />
  <link rel="stylesheet" href="../../../style/index.css" />
  <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
  <link rel="stylesheet" href="../../../admin/css/other/console1.css" />

  <title>活动信息</title>
  <style>
    /* 二维码弹窗样式 */
    .el-dialog__body {
      padding: 30px !important;
      /* 增大内边距 */
      background-color: #f9f9f9;
      /* 浅灰色背景提升对比度 */
    }

    #qr-* {
      width: 256px !important;
      height: 256px !important;
      border: 10px solid #ffffff;
      /* 白色边框提升识别率 */
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      /* 增强阴影效果 */
      margin: 0 auto 20px;
      /* 居中显示并添加底部间距 */
      display: block;
      /* 确保块级元素 */
    }

    /* 扫码引导样式 */
    .qr-guide {
      color: #d31805;
      font-size: 14px;
      margin-bottom: 15px;
    }

    .qr-guide .el-icon-d-arrow-bottom {
      font-size: 24px;
      display: block;
      margin-bottom: 8px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="title">
      <div>
        名称<el-input v-model="page.value1" style="width: 200px; margin: 0 10px" placeholder="请输入内容"></el-input>
        <el-button icon="Search" style="margin: 0; margin-right: 10px" @click="check">查询</el-button>
        <el-button icon="Refresh" style="margin: 0; margin-right: 10px" @click="reset">重置</el-button>
        <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px" @click="personalAdd" plain
          round>添加</el-button>
        <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" plain round>批量导入</el-button>
        <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" plain round>批量导出</el-button>
        <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" plain round>批量删除</el-button> -->
      </div>
    </div>
    <div class="body">
      <div class="left">
        <el-tree style="max-width: 600px" default-expand-all :expand-on-click-node="false" :data="treeData"
          :props="{ label:'Province'}" @node-click="handleNodeClick" :expand-on-click-node="false">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <span>{{ node.label }}</span>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="right">
        <el-table id="table" border
          :data-options="JSON.stringify({ 'TableName': 'village_activities','primary_key':'Village_Activity_SerialNumber'})"
          height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
          @selection-change="handleSelectionChange">
          <el-table-column min-width="180" show-overflow-tooltip v-for="column in columns" :key="column.COLUMN_NAME"
            :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
            <template #scope="scope">
              <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
                {{ scope.row[column.prop] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="180" fixed="right" align="center" label="议事厅类型">
            <template v-slot="{row}">
              {{row.Is_Assembly == '1' ?'社区议事厅':'乡村议事厅'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="180">
            <template v-slot="{row}">
              <div style="display: flex; align-items: center">
                <!-- <el-button size="small" style="margin-right: 10px" @click="handlexq(row)">扫码入会</el-button> -->
                <el-dropdown trigger="click">
                  <el-button size="small" type="danger">
                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="huir(row)">
                        参会人员
                      </el-dropdown-item>
                      <el-dropdown-item @click="canh(row)">
                        手动录入参会人员
                      </el-dropdown-item>
                      <el-dropdown-item v-if="row.Activity_isEdit == '0'" @click="handleEdit(row)">编辑</el-dropdown-item>
                      <el-dropdown-item v-else-if="row.Activity_isEdit == '1'"
                        @click="handleEdit1(row)">会议记录</el-dropdown-item>
                      <el-dropdown-item @click="handleDelete(row)">
                        删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 1%" :current-page="page.PageNumber" :page-size="page.RowAmount"
          :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="Total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="QR_code" title="活动详情" width="350" v-cloak>
      <div style="text-align: center">
        <div class="qr-container">
          <img :id="'qr-' + currentActivity?.Party_Organization_Activity_SerialNumber"
            style="width: 256px; height: 256px" />
          <div class="qr-guide">
            <i class="el-icon-d-arrow-bottom"></i>
            扫描二维码查看活动详情
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
  <script src="../../../yl/vue.js"></script>
  <script src="../../../config/config.js"></script>
  <script src="../../../utils/mixins.js"></script>
  <script src="../../../yl/index.js"></script>
  <script src="../../../yl/zh-cn.mjs"></script>
  <script src="../../../yl/index.iife.min.js"></script>
  <script src="../../../yl/jquery.min.js"></script>
  <script src="../../../utils/jquery.cookie.js"></script>
  <script src="../../../utils/qrious.js"></script>
  <script src="../../../utils/utils.js"></script>
  <script src="../../../api/request.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>